<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variable</title>
    <style>
        :root {
            --spacing: 10px;
            --blur: 10px;
            --base: #ffc600;
        }

        img {
            padding: var(--spacing);
            filter: blur(var(--blur));
            background-color: var(--base);
        }

        body {
            text-align: center;
            background: #193549;
            color: white;
            font-weight: 100;
            font-size: 50px;
        }

        .controls {
            margin-bottom: 50px;
        }

        input {
            width: 100px;
        }
    </style>
</head>

<body>
    <h2>Update Css Variables with JS</h2>
    <div class="controls">
        <div>Spacing:
            <input type="range" min="10" max="200" value="10" name="spacing">
            Blur:
            <input type="range" min="0" max="25" value="10" name="blur">
            Base Color:
            <input type="color" value="#ffc600" name="base">
        </div>
    </div>
    <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500" alt="图片">
    <script>
        const inputs = document.querySelectorAll(".controls input")
        const img = document.querySelector("img")

        function changeStyle() {
            //color不需要加上px
            if (this.name == 'base') {
                document.documentElement.style.setProperty(`--${this.name}`, this.value)
                //img.style.backgroundColor = this.value
            } else {

                document.documentElement.style.setProperty(`--${this.name}`, this.value + 'px')
            }
        }
        //只监听change的话，拖动再回到原点是不会触发的
        inputs.forEach((input) => input.addEventListener('change', changeStyle))
        //还要再监听mousemove
        inputs.forEach((input) => input.addEventListener('mousemove', changeStyle))
    </script>
</body>

</html>